<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Dashboard</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap-3.3.7-dist/css/bootstrap.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/dashboard/css/dashboard.css}"/>

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>

    <!--<link rel="stylesheet" type="text/css" th:href="@{/bootstrap-3.3.7-dist/css/htmleaf-demo.css}"/>-->

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<header class="navbar navbar-static-top bs-docs-nav" id="top">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar"
                    aria-controls="bs-navbar" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">@hj</a>
        </div>
        <nav id="bs-navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Rubric <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#"><i class="fa fa-pencil" aria-hidden="true"></i>New Rubric</a></li>
                        <li><a href="#"><i class="fa fa-th-list" aria-hidden="true"></i>Rubric List</a></li>
                        <!--<li role="separator" class="divider"></li>-->
                        <!--<li><a href="#">Separated link</a></li>-->
                    </ul>
                </li>

                <li>
                    <a href="../getting-started/">Import Student Excel</a>
                </li>

            </ul>
            <ul class="nav navbar-nav navbar-right">
                <!-- <li><a href="http://mb.bootcss.com" onclick="_hmt.push(['_trackEvent', 'docv3-navbar', 'click', 'themes'])" target="_blank">主题/模板</a></li> -->
                <li>
                    <a th:href="@{/teacher/logout}" title="Log Out">Logout
                        <i class="fa fa-sign-out"></i>
                    </a>
                    <!--<a href="http://www.bootcss.com/"-->
                    <!--onclick="_hmt.push(['_trackEvent', 'docv3-navbar', 'click', 'V3导航-Bootstrap中文网'])"-->
                    <!--target="_blank">Logout</a>-->
                </li>
            </ul>
        </nav>
    </div>
</header>


<div class="container bs-docs-container">

    <div class="row">
        <div class="col-md-3" role="main" >
            <h3>Student Information</h3>
            <hr/>
            <h4 th:text="${student.studentid}"></h4>
            <h4 th:text=" 'Chinase Name'+ ${student.chinesename}"></h4>
            <h4 th:text=" 'English Name'+ ${student.englishname}"></h4>
            <h4 th:text="${student.email}"></h4>
            <h4 th:text=" 'Year :' + ${student.studyyear}"></h4>
        </div>

        <div class="col-md-9" role="main" >



            <table id="myTable" class="table table-bordered table-hover ">
                <thead>
                <tr>
                    <th>Item</th>
                    <th>A</th>
                    <th>B</th>
                    <th>C</th>
                    <th>D</th>
                    <th>F</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="rule:${rules}">

                    <td th:text="${rule.name} +'('+ ${rule.percentage}+'%)'"></td>
                    <td >
                    </td>
                    <td ></td>
                    <td ></td>
                    <td ></td>
                    <td ></td>

                </tr>
                <tr>
                    <td>Total</td>
                    <td colspan="5"></td>
                </tr>



                </tbody>
            </table>


        </div>


    </div>

</div>




<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script th:src="@{/js/jquery-3.0.0.min.js}"></script>
<script th:src="@{/bootstrap-3.3.7-dist/js/bootstrap.js}" type="text/javascript"></script>



<script th:inline="javascript">
    /*<![CDATA[*/


    var items = /*[[${items}]]*/
        $(document).ready(function(){
            var str='<i class="fa fa-check" aria-hidden="true"></i>';
            for(var i = 0;i<items.length;i++){
                var grade = items[i].score;
                var name = items[i].item;
//                alert(name);
                if(name == "total") {
                    $("#myTable tr:gt(0):eq("+i+" ) td:eq("+1 +")").html(items[i].score);
                    continue;
                };
                var cellY = 0;
                if(grade == 'A'){
                    cellY = 1;
                }else if(grade == 'B'){
                    cellY = 2;
                }else if(grade == 'C'){
                    cellY = 3;
                }else if(grade == 'D'){
                    cellY = 4;
                }else if(grade == 'F'){
                    cellY = 5;
                }
                //$("#table3 tr:gt(0):eq(1) td:eq(2)").text();

                $("#myTable tr:gt(0):eq("+i+" ) td:eq("+cellY +")").html(str);
//                console.log(scores[i].x + " " +scores[i].y + " " +scores[i].score);
            }
            eTable();
        });









    /*]]>*/
</script>
</body>
</html>